import React, { memo, useCallback } from 'react';
import { Card, Button, Tag, Space, Checkbox, Tooltip } from 'antd';
import { EditOutlined, DeleteOutlined, CalendarOutlined, UserOutlined, PhoneOutlined } from '@ant-design/icons';
import type { IStudentCardProps } from '@/types/components/student';
import { StudentStatusEnum } from '@/types/student';
import styles from './StudentCard.module.css';

/**
 * 学生卡片组件
 * @description 用于显示单个学生的基本信息，支持编辑、删除、查看课表等操作
 */
const StudentCard: React.FC<IStudentCardProps> = memo(({
  student,
  onEdit,
  onDelete,
  onViewSchedule,
  className,
  showActions = true,
  selectable = false,
  selected = false,
  onSelect
}) => {
  // 处理编辑操作
  const handleEdit = useCallback(() => {
    onEdit?.(student.id);
  }, [student.id, onEdit]);

  // 处理删除操作
  const handleDelete = useCallback(() => {
    onDelete?.(student.id);
  }, [student.id, onDelete]);

  // 处理查看课表操作
  const handleViewSchedule = useCallback(() => {
    onViewSchedule?.(student.id);
  }, [student.id, onViewSchedule]);

  // 处理选择操作
  const handleSelect = useCallback((checked: boolean) => {
    onSelect?.(student.id, checked);
  }, [student.id, onSelect]);

  // 获取状态标签
  const getStatusTag = () => {
    const statusConfig = {
      [StudentStatusEnum.ACTIVE]: { color: 'green', text: '在读' },
      [StudentStatusEnum.INACTIVE]: { color: 'orange', text: '休学' },
      [StudentStatusEnum.GRADUATED]: { color: 'blue', text: '毕业' },
      [StudentStatusEnum.DELETED]: { color: 'red', text: '已删除' }
    };

    const config = statusConfig[student.status] || { color: 'default', text: '未知' };
    return <Tag color={config.color}>{config.text}</Tag>;
  };

  // 渲染操作按钮
  const renderActions = () => {
    if (!showActions) return null;

    return (
      <Space size="small">
        {onViewSchedule && (
          <Tooltip title="查看课表">
            <Button
              type="text"
              size="small"
              icon={<CalendarOutlined />}
              onClick={handleViewSchedule}
            />
          </Tooltip>
        )}
        {onEdit && (
          <Tooltip title="编辑">
            <Button
              type="text"
              size="small"
              icon={<EditOutlined />}
              onClick={handleEdit}
            />
          </Tooltip>
        )}
        {onDelete && (
          <Tooltip title="删除">
            <Button
              type="text"
              size="small"
              danger
              icon={<DeleteOutlined />}
              onClick={handleDelete}
            />
          </Tooltip>
        )}
      </Space>
    );
  };

  // 渲染卡片标题
  const renderTitle = () => (
    <div className={styles.cardTitle}>
      {selectable && (
        <Checkbox
          checked={selected}
          onChange={(e) => handleSelect(e.target.checked)}
          className={styles.checkbox}
        />
      )}
      <UserOutlined className={styles.titleIcon} />
      <span className={styles.studentName}>{student.name}</span>
      {getStatusTag()}
    </div>
  );

  return (
    <Card
      className={`${styles.studentCard} ${className || ''} ${selected ? styles.selected : ''}`}
      title={renderTitle()}
      extra={renderActions()}
      size="small"
      hoverable
    >
      <div className={styles.cardContent}>
        <div className={styles.infoRow}>
          <span className={styles.label}>学号：</span>
          <span className={styles.value}>{student.studentId}</span>
        </div>
        
        {student.grade && (
          <div className={styles.infoRow}>
            <span className={styles.label}>年级：</span>
            <span className={styles.value}>{student.grade}</span>
          </div>
        )}
        
        {student.class && (
          <div className={styles.infoRow}>
            <span className={styles.label}>班级：</span>
            <span className={styles.value}>{student.class}</span>
          </div>
        )}
        
        {student.phone && (
          <div className={styles.infoRow}>
            <PhoneOutlined className={styles.phoneIcon} />
            <span className={styles.value}>{student.phone}</span>
          </div>
        )}
        
        {student.remark && (
          <div className={styles.remarkRow}>
            <span className={styles.label}>备注：</span>
            <span className={styles.remark}>{student.remark}</span>
          </div>
        )}
      </div>
    </Card>
  );
});

StudentCard.displayName = 'StudentCard';

export default StudentCard;